<template>
  <view class="container">
    <u-empty text="暂无数据" v-if="!hasData"></u-empty>
    <u-list @scrolltolower="scrolltolower" class="order-list" :scrollable="true" v-if="hasData">
      <u-list-item class="order-item" v-for="(order, index) in orderList" :key="index">
        <view class="order-row" @click="handleOrderClick(order.id)">
          <view class="order-left">
            <view style="margin: 3rpx;">{{ order.startAddress }}</view>
            <view style="margin: 3rpx;">{{ order.endAddress}}</view>
          </view>
          <view class="order-right">
            <view style="margin: 3rpx;">{{ order.status | getStatusName}}</view>
            <view style="margin: 3rpx;">{{$u.timeFormat( order.createTime, 'yyyy年mm月dd日')}}</view>
          </view>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
  import {
    pincheOrderPage
  } from '../../api/pinche'
  export default {
    filters: {
      getStatusName(status) {
        if (status == 0) {
          return "待接单";
        } else if (status == 1) {
          return "已接单";
        } else if (status == 2 || status == 3 || status == 5) {
          return "已取消";
        } else {
          return "已完成"
        }
      }
    },
    data() {
      return {
        pageNo: 1,
        total: 0,
        orderList: []
      }
    },
    onLoad() {
      this.loadmore()
    },
    mounted() {
      var a = document.getElementsByClassName('uni-page-head-hd')[0]
      a.style.display = 'none';
    },
    methods: {
      scrolltolower() {
        if (this.total > this.orderList.length) {
          this.pageNo = this.pageNo + 1;
          this.loadmore()
        }
      },
      loadmore() {
        let params = {
          pageNo: this.pageNo
        }
        pincheOrderPage(params)
          .then(res => {
            let orderList = res.data.list || [];
            this.orderList = this.orderList.concat(orderList);
            this.total = res.data.total;
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleOrderClick(orderId) {
        uni.$u.route('/pages/pinche/detail', {
          id: orderId
        })
      }
    },
    computed: {
      hasData: {
        get() {
          return this.orderList.length > 0;
        },
        set() {}
      }
    }
  }
</script>
<style lang="scss" scoped>
  .order-list {
    background-color: #f3f3f3;

    .order-item {
      padding: 20rpx;
      background-color: #ffffff;
      border-bottom: $custom-border-style;

      .order-row {
        @include flex-space-between;
        // height: 80rpx;

        .order-left {
          font-size: 34rpx;
          color: #333;
        }

        .order-right {
          font-size: 30rpx;
          color: #999;
        }
      }
    }
  }
</style>
